import React, { memo } from 'react';
import { Empty as AntEmpty } from 'antd';
import {
  FileTextOutlined,
  UserOutlined,
  BookOutlined,
  CalendarOutlined,
  SearchOutlined,
  InboxOutlined
} from '@ant-design/icons';
import classNames from 'classnames';
import { Button } from '../Button';
import type { IButtonProps } from '../Button';
import styles from './Empty.module.css';

/**
 * 空状态组件属性接口
 * @description 定义空状态组件的属性
 */
export interface IEmptyProps {
  /** 空状态类型 */
  type?: 'default' | 'search' | 'data' | 'student' | 'course' | 'schedule' | 'file';
  /** 空状态标题 */
  title?: string;
  /** 空状态描述 */
  description?: string;
  /** 自定义图标 */
  icon?: React.ReactNode;
  /** 图片地址 */
  image?: string | React.ReactNode;
  /** 是否显示操作按钮 */
  showAction?: boolean;
  /** 操作按钮文本 */
  actionText?: string;
  /** 操作按钮属性 */
  actionProps?: IButtonProps;
  /** 操作按钮点击事件 */
  onAction?: () => void;
  /** 组件尺寸 */
  size?: 'small' | 'default' | 'large';
  /** 自定义类名 */
  className?: string;
  /** 自定义样式 */
  style?: React.CSSProperties;
  /** 子元素 */
  children?: React.ReactNode;
}

/**
 * 空状态组件
 * @description 提供多种场景的空状态展示，支持自定义图标、文案和操作按钮
 */
const Empty = memo<IEmptyProps>(({
  type = 'default',
  title,
  description,
  icon,
  image,
  showAction = false,
  actionText = '立即添加',
  actionProps,
  onAction,
  size = 'default',
  className,
  style,
  children
}) => {
  // 根据类型获取默认配置
  const getTypeConfig = () => {
    switch (type) {
      case 'search':
        return {
          icon: <SearchOutlined />,
          title: '暂无搜索结果',
          description: '请尝试调整搜索条件或关键词',
          actionText: '重新搜索'
        };
      case 'data':
        return {
          icon: <InboxOutlined />,
          title: '暂无数据',
          description: '当前没有任何数据，请添加后再查看',
          actionText: '添加数据'
        };
      case 'student':
        return {
          icon: <UserOutlined />,
          title: '暂无学生信息',
          description: '还没有添加任何学生，请先添加学生信息',
          actionText: '添加学生'
        };
      case 'course':
        return {
          icon: <BookOutlined />,
          title: '暂无课程信息',
          description: '还没有创建任何课程，请先创建课程',
          actionText: '创建课程'
        };
      case 'schedule':
        return {
          icon: <CalendarOutlined />,
          title: '暂无课表安排',
          description: '还没有安排任何课程，请先添加课程安排',
          actionText: '添加课程'
        };
      case 'file':
        return {
          icon: <FileTextOutlined />,
          title: '暂无文件',
          description: '还没有上传任何文件，请先上传文件',
          actionText: '上传文件'
        };
      case 'default':
      default:
        return {
          icon: <InboxOutlined />,
          title: '暂无内容',
          description: '当前没有任何内容',
          actionText: '立即添加'
        };
    }
  };

  const typeConfig = getTypeConfig();

  // 获取最终的配置
  const finalIcon = icon || typeConfig.icon;
  const finalTitle = title || typeConfig.title;
  const finalDescription = description || typeConfig.description;
  const finalActionText = actionText || typeConfig.actionText;

  // 获取图片或图标
  const getImageOrIcon = () => {
    if (image) {
      return image;
    }

    if (finalIcon) {
      return (
        <div className={styles.iconWrapper}>
          {React.cloneElement(finalIcon as React.ReactElement, {
            className: classNames(styles.icon, {
              [styles.small]: size === 'small',
              [styles.large]: size === 'large'
            })
          })}
        </div>
      );
    }

    return AntEmpty.PRESENTED_IMAGE_DEFAULT;
  };

  // 渲染操作按钮
  const renderAction = () => {
    if (!showAction || !onAction) {
      return null;
    }

    return (
      <Button
        variant="primary"
        onClick={onAction}
        {...actionProps}
      >
        {finalActionText}
      </Button>
    );
  };

  // 组合类名
  const emptyClassName = classNames(
    styles.empty,
    {
      [styles.small]: size === 'small',
      [styles.large]: size === 'large',
      [styles.hasAction]: showAction,
    },
    className
  );

  return (
    <div className={emptyClassName} style={style}>
      <AntEmpty
        image={getImageOrIcon()}
        description={
          <div className={styles.description}>
            {finalTitle && (
              <div className={styles.title}>
                {finalTitle}
              </div>
            )}
            {finalDescription && (
              <div className={styles.text}>
                {finalDescription}
              </div>
            )}
          </div>
        }
      />
      {renderAction()}
      {children}
    </div>
  );
});

Empty.displayName = 'Empty';

export default Empty;